<template>
    <div class="boxONE" style="width: 100%;
        height: 100%;
       ">
        <div class="left" style=" 
        width: 100%;
        height: 100%;
        border-radius: 10px;
        float: left;
        position: relative;
        background-repeat: no-repeat;
        background-size: contain;">
            <div class="bg" style=" width: 0;
        height: 40px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;"></div>
            <i class="progressbara" style="  width: 16px;
        height: 27px;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0px;
        border-radius: 10px;
        cursor: move;"></i>
        </div>
    </div>
</template>
<script>
export default {
    props: ['xtotal','xnumber','xdecimal'],
    data() {
        return {
            total: this.xtotal,
            number: this.xnumber,
            current: 0,
            decimal: this.xdecimal
        }
    },
    mounted() {
        // var progressbar = document.querySelector(".progressbara");     //获取元素
        // var bg = document.querySelector(".bg");
        // var num = document.querySelector(".right");
        // let that = this
        // progressbar.onmousedown = function (event) {
        //     var event = event || window.event;
        //     var l = event.clientX - progressbar.offsetLeft;
        //     document.onmousemove = function (event) {
        //         var event = event || window.event;
        //         var x = event.clientX - l;
        //         if (x <= 0) {
        //             x = 0;
        //         } else if (x >= progressbar.parentNode.offsetWidth - progressbar.offsetWidth) {
        //             x = progressbar.parentNode.offsetWidth - progressbar.offsetWidth;
        //         }
        //         progressbar.style.left = x + "px";
        //         bg.style.width = x + "px";
        //         let result = x / (progressbar.parentNode.offsetWidth - progressbar.offsetWidth) * that.total
        //         let pow = Math.pow(10, that.decimal)
        //         that.current = Math.round(result * pow) / pow
        //         that.$emit("changedb", that.current)
        //     }
        //     document.onmouseup = function () {
        //         document.onmousemove = null;  
        //         document.onmouseup = null;
        //     }
        //     return false;
        // }
    },
    watch: {
        xnumber: function (newVal, oldVal) {
            console.log(newVal)
            var progressbar = document.querySelector(".progressbara");
            console.log(newVal * (progressbar.parentNode.offsetWidth - progressbar.offsetWidth) + "px");
            progressbar.style.left = newVal * (progressbar.parentNode.offsetWidth - progressbar.offsetWidth) / this.total + "px";
        }
    }
}
</script>
<style lang="scss">
.boxONE{
    .left{
        background-image: url('https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/L.png');
        .progressbara{
            background-image: url('https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/xing.png');
        }
    }
}
</style>